<template>
  <div v-loading="loading" class="monthPlanAdd">
    <b-table
      ref="table"
      :columns="columns"
      :request="request"
      bordered
      class="bgFFF"
      :disabled="state === 3"
      :delFunc="delFunc"
      :scroll="{ x: 1300 }"
      :exportConfig="{ use: true,select: '物资需求月计划',all: '物资需求月计划'}"
      :is-show-count-bar="false"
    >
      <template slot="prefix" v-if="state !== 3">
        <a-button
          type="primary"
          :loading="addLoading"
          @click="openDailog"
        >
          添加行
        </a-button>
      </template>
      <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
      <template
        v-for="col in ['planNum', 'planIntoDate', 'useSite', 'remarks']"
        :slot="col"
        slot-scope="text, record"
      >
        <div :key="col" class="form-item">
          <template v-if="state !== 3">
            <a-date-picker
              v-if="col === 'planIntoDate'"
              v-model="record.planIntoDate"
              value-format="YYYY-MM-DD"
              @change="save(record)"
            />
            <BaseInputNumber
              v-else-if="col === 'planNum'"
              v-model="record[col]"
              :precision="3"
              @blur="save(record)"
            />
            <BaseInput
              v-else
              style="margin: -5px 0"
              :class="col === 'remarks' ? 'remark' : ''"
              v-model="record[col]"
              @blur="save(record)"
            />
          </template>
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
    </b-table>

    <materialListAndDir
      ref="detailDialog"
      :mode="'single'"
      :api="detailDialogList"
      :request-params="{ projectId: row.projectCode }"
      :other-data="{ projectId: row.projectCode }"
      @createList="createList"
    />
  </div>
</template>
<script>
import {
  monthPlanDetailList,
  monthPlanDetailAdd,
  monthPlanDetailListDel,
  monthPlanDetailEdit,
  detailDialogList
} from '@/api/material/materialMasterPlan/monthPlan'
import { materialColumns } from './insideModel'
import materialListAndDir from '@/components/materialListAndDir/materialListAndDir'

const data = []
export default {
  name: 'a' + Date.now(),
  props: {
    state: {
      type: Number
    },
    row: {
      type: Object
    }
  },
  data() {
    this.cacheData = data.map((item) => ({ ...item }))
    return {
      delFunc: monthPlanDetailListDel,
      loading: false,
      addLoading: false,
      queryParam: {},
      columns: materialColumns,
      data: this.tableData,
      rules: {
        planNum: [{ rule: 'required', message: '计划数量不能为空' }],
        planIntoDate: { rule: 'required', message: '计划进场日期不能为空' },
        useSite: { rule: 'required', message: '使用部位不能为空' }
      },
      request: q => {
        return monthPlanDetailList(Object.assign({}, q, { materialMonthId: this.row.id }))
      },
      detailDialogList: detailDialogList
    }
  },
  mounted: function() {
    if (this.state === 3) {
      this.editingKey = true
    }
  },
  methods: {
    createList(data) {
      let params = []
      data.forEach((item) => {
        params.push({
          editId: this.row.id,
          materialCode: item.code,
          materialModel: item.specificationModel,
          materialName: item.name,
          materialUnit: item.unitId,
          planIntoDate: '',
          planNum: '',
          remark: '',
          useSite: '',
          materialId: item.id
        })
      })
      monthPlanDetailAdd(params).then((res) => {
        if (res.code === 200) {
          this.initTable()
        }
      })
    },
    openDailog() {
      if (this.$refs.table.totalSize === 0) {
        this.$refs.detailDialog.open()
        return
      }
      this.addLoading = true
      monthPlanDetailList({
        pageSize: 10000,
        pageNo:1,
        materialMonthId: this.row.id
      }).then((res) => {
        this.addLoading = false
        this.$refs.detailDialog.open(res.data)
      })
    },
    initTable() {
      this.pageNo = 1
      this.list()
    },
    list() {
      this.$refs.table.refresh()
    },

    async save(row) {
      await monthPlanDetailEdit(row)
    }

  }
}
</script>
<style lang="less" scoped>
/deep/ .form-item {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number-input,
  .ant-cascader-picker {
    border-color: #e4ac0b;
    background-color: #fff9e8;
  }

  .remark {
    .ant-input {
      border-color: inherit;
      background-color: initial;
    }
  }
}
</style>
